<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.keyword" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增业主</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="owners" highlight-current-row v-loading="listLoading"
              @selection-change="selsChange" @expand-change="handleExpendRow" style="width: 100%;">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="member" style="width: calc(100% - 47px)" class="two-list">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="80"></el-table-column>
            <el-table-column prop="phone" label="电话" width="120"></el-table-column>
            <el-table-column prop="idcard" label="身份证号" width="180"></el-table-column>
            <el-table-column prop="sex" label="性别" width="60">
              <!-- scpoe : 它能获取到当前行的数据-->
              <template scope="scope">
                <span style="color: #1f1e1e" v-if="scope.row.sex === 35">男</span>
                <span style="color: #141212" v-else-if="scope.row.sex === 36">女</span>
                <span style="color: #5e7382" v-else>未知</span>
              </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄" width="60"></el-table-column>
            <el-table-column prop="homeAdderss" label="家庭地址" width="120"></el-table-column>
            <el-table-column prop="accessKey" label="门禁密钥" width="280"></el-table-column>
            <el-table-column prop="qqNumber" label="QQ号" width="140"></el-table-column>
            <el-table-column prop="type" label="成员类型" width="80">
              <!-- scpoe : 它能获取到当前行的数据-->
              <template scope="scope">
                <span style="color: #00aaff" v-if="scope.row.type === 45">家庭成员</span>
                <span style="color: #15ebf6" v-else-if="scope.row.type === 46">租客</span>
                <span style="color: #ee83f4" v-else-if="scope.row.type === 47">其他</span>
                <span style="color: #5e7382" v-else>未知</span>
              </template>
            </el-table-column>
            <el-table-column prop="remarks" label="备注" width="120"></el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="80"></el-table-column>
      <el-table-column prop="phone" label="电话" width="120"></el-table-column>
      <el-table-column prop="idcard" label="身份证号" width="180"></el-table-column>
      <el-table-column prop="sex" label="性别" width="60">
        <!-- scpoe : 它能获取到当前行的数据-->
        <template scope="scope">
          <span style="color: #1f1e1e" v-if="scope.row.sex === 35">男</span>
          <span style="color: #141212" v-else-if="scope.row.sex === 36">女</span>
          <span style="color: #5e7382" v-else>未知</span>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="60"></el-table-column>
      <el-table-column prop="homeAdderss" label="家庭地址" width="120"></el-table-column>
      <el-table-column prop="accessKey" label="门禁密钥" width="280"></el-table-column>
      <el-table-column prop="qqNumber" label="QQ号" width="140"></el-table-column>
      <el-table-column prop="house.remarks" label="房屋信息" width="140"></el-table-column>
      <el-table-column prop="remarks" label="备注" width="120"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" :formatter="formatDate" width="180">
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template scope="scope">
          <el-button type="success" size="small" @click="handleEdit(scope.$index, scope.row)">入住</el-button>
          <!--          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>-->
          <el-button type="danger" size="small" @click="handleUnbind(scope.$index, scope.row)">解绑</el-button>
          <el-button type="warning" size="small" @click="handleAddMember(scope.$index, scope.row)">添加成员</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      <el-pagination layout="prev, pager, next"
                     @current-change="handleCurrentChange"
                     :page-size="pageSize"
                     :current-page="currentPage"
                     :total="total" style="float:right;">
      </el-pagination>
    </el-col>


    <!--新增业主界面-->
    <el-dialog :title="title" :visible.sync="addFormVisible" :close-on-click-modal="false" width="80%" hight="60%">
      <el-form :model="editForm" label-width="80px" ref="editForm" :inline="true">
        <el-table-column prop="id" label="员工id" width="60"></el-table-column>
        <el-form-item label="业主姓名" prop="name" style="width: 300px">
          <el-input v-model="editForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="业主电话" prop="phone" style="width: 300px">
          <el-input v-model="editForm.phone" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idcard" style="width: 400px">
          <el-input v-model="editForm.idcard" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="业主性别" prop="sex" style="width: 330px">
          <el-select v-model="editForm.sex" placeholder="请选择">
            <el-option
                v-for="item in ownerSex"
                :label="item.name"
                :value="item.id">
              <span style="float: left">{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业主年龄" prop="age" style="width: 300px">
          <el-input v-model="editForm.age" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="家庭地址" prop="homeAdderss" style="width: 400px">
          <el-input v-model="editForm.homeAdderss" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="业主QQ" prop="qqNumber" style="width: 300px">
          <el-input v-model="editForm.qqNumber" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks" style="width: 300px">
          <el-input v-model="editForm.remarks" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>

    <!--新增成员界面-->
    <el-dialog :title="title" :visible.sync="addMemberFormVisible" :close-on-click-modal="false" width="80%" hight="60%">
      <el-form :model="addMemberForm" label-width="80px" ref="addMemberForm" :inline="true">
        <el-table-column prop="id" label="员工id" width="60"></el-table-column>
        <el-form-item label="成员姓名" prop="name" style="width: 300px">
          <el-input v-model="addMemberForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="成员电话" prop="phone" style="width: 300px">
          <el-input v-model="addMemberForm.phone" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idcard" style="width: 400px">
          <el-input v-model="addMemberForm.idcard" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="成员性别" prop="sex" style="width: 330px">
          <el-select v-model="addMemberForm.sex" placeholder="请选择">
            <el-option
                v-for="item in ownerSex"
                :label="item.name"
                :value="item.id">
              <span style="float: left">{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成员类型" prop="type" style="width: 330px">
          <el-select v-model="addMemberForm.type" placeholder="请选择">
            <el-option
                v-for="item in types"
                :label="item.name"
                :value="item.id">
              <span style="float: left">{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成员年龄" prop="age" style="width: 300px">
          <el-input v-model="addMemberForm.age" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="家庭地址" prop="homeAdderss" style="width: 400px">
          <el-input v-model="addMemberForm.homeAdderss" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="成员QQ" prop="qqNumber" style="width: 300px">
          <el-input v-model="addMemberForm.qqNumber" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks" style="width: 300px">
          <el-input v-model="addMemberForm.remarks" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addMemberFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addMemberSubmit" :loading="addMemberLoading">提交</el-button>
      </div>
    </el-dialog>

    <!-- ====================== 入住界面  ========================-->
    <el-dialog  :visible.sync="editFormVisible" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
        <el-table-column prop="id" label="员工id" width="60"></el-table-column>
        <span> <h3>入住房屋信息选择</h3></span>
        <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
          <el-select v-model="editForm.buildId" placeholder="请选择楼栋" @change="handleBuildingChange">
            <el-option v-for="(building, index) in buildings"
                       :key="index"
                       :label="building.name"
                       :value="building.id"></el-option>
          </el-select>
          <el-select v-model="editForm.unitId" placeholder="请选择单元" :disabled="!editForm.buildId"
                     @change="handleUnitChange">
            <el-option v-for="(unit, index) in units"
                       :key="index"
                       :label="unit.remarks"
                       :value="unit.id"></el-option>
          </el-select>
          <el-select v-model="editForm.houseId" placeholder="请选择房屋" :disabled="!editForm.unitId">
            <el-option v-for="(room, index) in rooms"
                       :key="index"
                       :label="room.number"
                       :value="room.id"></el-option>
          </el-select>
        </el-form>

<!--        <el-form-item label="业主姓名" prop="name" style="width: 400px">-->
<!--          <el-input v-model="editForm.name" auto-complete="off"></el-input>-->
<!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script>
import util from '../../common/js/util'
//import NProgress from 'nprogress'
import {
  getNurseListPage,
  removeNurse,
  batchRemoveNurse,
  editNurse,
  addNurse
} from '../../api/api';

export default {
  data() {
    return {
      buildings: [],
      units: [],
      rooms: [],
      member: [],
      selectedBuilding: '',
      selectedUnit: '',
      selectedRoom: '',

      options: [],
      title: '',
      filters: {
        keyword: ''
      },
      owners: [],
      types: [],
      ownerSex: [],
      nurseStates: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      page: 1,
      listLoading: false,
      sels: [],//列表选中列

      editFormVisible: false,//编辑界面是否显示
      editLoading: false,
      addFormVisible: false,//编辑界面是否显示
      addMemberFormVisible: false,//编辑界面是否显示
      addLoading: false,
      addMemberLoading: false,
      editFormRules: {
        // name: [
        //   {required: true, message: '请输入合同名称', trigger: 'blur'}
        // ],
        // sn: [
        //   {required: true, message: '请输入合同编号', trigger: 'blur'}
        // ]
      },
      //编辑界面数据
      editForm: {
        id: null,
        name: '',
        phone: '',
        idcard: '',
        sex: '',
        age: '',
        homeAdderss: '',
        accessKey: '',
        qqNumber: '',
        remarks: '',
        createTime: '',
        house: null,
        buildId: null,// 楼栋id
        unitId: null,// 单元id
        houseId: null,// 房屋id
      },
      //入住界面数据
      CheckInForm: {
        id: null,
        name: '',
        phone: '',
        idcard: '',
        sex: '',
        age: '',
        homeAdderss: '',
        accessKey: '',
        qqNumber: '',
        remarks: '',
        createTime: '',
        house: null,
        buildId: null,// 楼栋id
        unitId: null,// 单元id
        houseId: null,// 房屋id
      },
      //新增界面数据
      addMemberForm: {
        id: null,
        name: '',
        phone: '',
        idcard: '',
        sex: '',
        age: '',
        homeAdderss: '',
        accessKey: '',
        qqNumber: '',
        remarks: '',
        createTime: '',
        houseId: null,// 房屋id
        ownerId:null,
        type: '',
      },

    }
  },
  methods: {
    handleExpendRow(row, expandedRows) {
      this.table = true;
      let id = row.id;
      this.$http.get("/ownerMember/findByOwnerId/" + id)
          .then(result => {
            this.member = result.data;
          })

    },
    handleBuildingChange(selectedBuilding) {
      console.log(selectedBuilding);
      // 根据选择的楼栋动态计算单元选项
      this.selectedUnit = '';
      this.selectedRoom = '';
      let id = selectedBuilding;
      this.$http.post("/unit/findUnitByBuildingId/" + id)
          .then(result => {
            this.units = result.data;
          })
    },
    handleUnitChange(selectedUnit) {
      console.log(selectedUnit);
      // 根据选择的单元动态计算房屋选项
      this.selectedRoom = '';
      let id = selectedUnit;
      this.$http.post("/house/findHouseByUnitId/" + id)
          .then(result => {
            this.rooms = result.data;
          })
    },
    // 获取楼栋信息
    getBuilding() {
      this.$http.get("/building")
          .then(result => {
            this.buildings = result.data;
          })
    },
    // 获取性别 35=男 36=女
    getOwnerSex() {
      this.$http.get("/detail/findOldManSex")
          .then(result => {
            this.ownerSex = result.data;
          })
    },
    // 获取成员类型
    getMemberType() {
      this.$http.get("/detail/findMemberType")
          .then(result => {
            this.types = result.data;
          })
    },
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property];
      if (data == null) {
        return null;
      }
      let dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
    },
    search() {
      this.currentPage = 1;
      this.getOwners();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getOwners();
    },
    //获取业主列表
    getOwners() {
      let para = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        keyword: this.filters.keyword
      };
      this.listLoading = true;
      //NProgress.start();
      this.$http.post("/owner/list", para)
          .then(result => {
            // 关闭忙等
            this.listLoading = false;
            this.total = result.data.totals;
            this.owners = result.data.rows;
          })
          .catch(res => {
            this.$message({
              message: "网络不通！",
              type: "error",
            })
          })
    },
    //删除
    handleDel: function (index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        //NProgress.start();
        let id = row.id;
        this.$http.delete("/owner/" + id)
            .then(result => {
              this.listLoading = false;
              if (result.data.success) { // 如果后端返回success
                this.$message({
                  message: result.data.msg,
                  type: 'success'
                });
                this.currentPage = 1,
                    // 刷新列表
                    this.getOwners();
              } else {
                this.$message({
                  message: result.data.msg,
                  type: 'error'
                });
              }
            }).catch(result => {
          // 1.关闭忙等框
          this.listLoading = false;
          // 2.给出自定义失败提示！
          this.$message({
            message: '系统繁忙，请重试！',
            type: 'error'
          });
        })
      }).catch(() => {
      });
    },
    //解绑
    handleUnbind: function (index, row) {
        this.$confirm('确认解绑该房屋信息吗?', '提示', {
          type: 'warning'
        }).then(() => {
          // 列表忙等
          this.listLoading = true;
          // 请求后端接口
          let para = Object.assign({}, row);
          this.$http.put("/owner/unbind", para)
              .then(result => {
                result = result.data;
                if (result.success) {
                  this.$message({
                    message: '解绑成功',
                    type: 'success'
                  });
                } else {
                  this.$message({
                    message: result.msg,
                    type: 'error'
                  });
                }
                // 关闭忙等
                this.listLoading = false;
                // 刷新列表
                this.currentPage = 1;
                this.getOwners();
              })
              .catch(result => {
                this.listLoading = false;
                this.$message({
                  message: '网络不通',
                  type: 'error'
                });
              })
        })
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      this.title = "编辑";
      this.editFormVisible = true;
      this.editForm = Object.assign({}, row);
    },

    //显示新增成员界面
    handleAddMember: function (index, row) {
      this.title = "编辑";
      this.addMemberFormVisible = true;
      this.addMemberForm =  {
        id: null,
        name: '',
        phone: '',
        idcard: '',
        sex: 35,
        age: '',
        homeAdderss: '',
        accessKey: '',
        qqNumber: '',
        remarks: '',
        createTime: '',
        house: null,
        houseId: row.houseId,// 房屋id
        ownerId: row.id,
        owner: null,
      };
    },
    //显示新增界面
    handleAdd: function () {
      this.title = "新增";
      this.addFormVisible = true;
      this.editForm = {
        id: null,
        name: '',
        phone: '',
        idcard: '',
        sex: 35,
        age: '',
        homeAdderss: '',
        accessKey: '',
        qqNumber: '',
        remarks: '',
        createTime: '',
        house: null,
        buildId: null,// 楼栋id
        unitId: null,// 单元id
        houseId: null,// 房屋id
      };
    },
    //显示入住界面
    handleCheckIn: function () {
      this.title = "入住";
      this.CheckInFormVisible = true;
      this.CheckInForm = {
        id: null,
        name: '',
        phone: '',
        idcard: '',
        sex: 35,
        age: '',
        homeAdderss: '',
        accessKey: '',
        qqNumber: '',
        remarks: '',
        createTime: '',
        house: null,
        buildId: null,// 楼栋id
        unitId: null,// 单元id
        houseId: null,// 房屋id
      };
    },
    //编辑
    editSubmit: function () {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.editLoading = true; // 开启提交按钮忙等
            let para = Object.assign({}, this.editForm); // 表单数据拷贝
            // 1.发送Axios请求
            this.$http.put("/owner", para)
                .then(result => {
                  console.log(result);
                  // 1.关闭提交按钮忙等
                  this.editLoading = false;
                  this.addLoading = false;
                  // 2.关闭弹出框
                  this.editFormVisible = false;
                  this.addFormVisible = false;
                  // 3.获取后端传递的AjaxResult对象
                  // result = result.data;
                  // 4.判断删除是否成功
                  if (result.data.success) {
                    // 1.给出成功提示
                    this.$message({
                      message: result.data.msg,
                      type: 'success'
                    });
                    // 2.修改页码为第一页
                    // this.currentPage = 1;
                    // 3.调用函数刷新列表
                    this.getOwners();
                  } else {
                    // 1.给出失败提示
                    this.$message({
                      message: result.data.msg,
                      type: 'error'
                    });
                    this.getOwners();
                  }
                })
          });
        }
      });
    },
    // 新增成员
    addMemberSubmit: function () {
      this.$refs.addMemberForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.editLoading = true; // 开启提交按钮忙等
            let para = Object.assign({}, this.addMemberForm); // 表单数据拷贝
            // 1.发送Axios请求
            this.$http.put("/ownerMember", para)
                .then(result => {
                  console.log(result);
                  // 1.关闭提交按钮忙等
                  this.addMemberLoading = false;
                  // 2.关闭弹出框
                  this.addMemberFormVisible= false;
                  // 3.获取后端传递的AjaxResult对象
                  // result = result.data;
                  // 4.判断删除是否成功
                  if (result.data.success) {
                    // 1.给出成功提示
                    this.$message({
                      message: result.data.msg,
                      type: 'success'
                    });
                    // 2.修改页码为第一页
                    // this.currentPage = 1;
                    // 3.调用函数刷新列表
                    this.getOwners();
                  } else {
                    // 1.给出失败提示
                    this.$message({
                      message: result.data.msg,
                      type: 'error'
                    });
                    this.getOwners();
                  }
                })
          });
        }
      });
    },
    //入住
    CheckSubmit: function () {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.editLoading = true; // 开启提交按钮忙等
            let para = Object.assign({}, this.editForm); // 表单数据拷贝
            // 1.发送Axios请求
            this.$http.put("/owner/checkIn", para)
                .then(result => {
                  console.log(result);
                  // 1.关闭提交按钮忙等
                  this.editLoading = false;
                  // 2.关闭弹出框
                  this.editFormVisible = false;
                  // 3.获取后端传递的AjaxResult对象
                  // result = result.data;
                  // 4.判断删除是否成功
                  if (result.data.success) {
                    // 1.给出成功提示
                    this.$message({
                      message: result.data.msg,
                      type: 'success'
                    });
                    // 2.修改页码为第一页
                    // this.currentPage = 1;
                    // 3.调用函数刷新列表
                    this.getOwners();
                  } else {
                    // 1.给出失败提示
                    this.$message({
                      message: result.data.msg,
                      type: 'error'
                    });
                    this.getOwners();
                  }
                })
          });
        }
      });
    },

    selsChange: function (sels) {
      this.sels = sels;
    },
    //批量删除
    batchRemove: function () {
      var ids = this.sels.map(item => item.id);
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        //NProgress.start();
        this.$http.patch("/owner", ids)
            .then(result => {
              result = result.data;
              if (result.success) { // 如果后端返回success
                this.$message({
                  message: result.msg,
                  type: 'success'
                });
                this.currentPage = 1,
                    // 刷新列表
                    this.getOwners();
              } else {
                this.$message({
                  message: result.msg,
                  type: 'error'
                });
              }

            })
            .catch(result => { // 接口调用失败
              // 1.关闭忙等框
              this.listLoading = false;
              // 2.给出自定义失败提示！
              this.$message({
                message: '系统繁忙，请重试！',
                type: 'error'
              });
            })
      }).catch(() => {

      });
    }
  },
  mounted() {
    this.getOwners();
    this.getOwnerSex();
    this.getBuilding();
    this.getMemberType();
  }
}

</script>

<style scoped>

</style>